<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center p-4 relative overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <!-- 浮动装饰元素 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-float"></div>
      <div class="absolute top-60 right-10 w-16 h-16 bg-white/10 rounded-lg animate-float animation-delay-2000"></div>
      <div class="absolute bottom-20 left-20 w-12 h-12 bg-white/10 rounded-full animate-float animation-delay-4000"></div>
    </div>

    <div class="card w-full max-w-md bg-white/85 backdrop-blur-sm shadow-2xl border border-white/30" style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);">
      <div class="card-body">
        <!-- Logo和标题 -->
        <div class="text-center mb-6">
          <div class="mx-auto w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center mb-4 shadow-lg">
            <i class="fas fa-brain text-white text-2xl"></i>
          </div>
          <h1 class="text-2xl font-bold text-gray-800 mb-2">博沃智慧</h1>
          <p class="text-gray-600">智能问答系统</p>
        </div>

        <form @submit.prevent="handleSubmit" class="space-y-4">
          <!-- 用户名 -->
          <div class="form-control">
            <div class="mb-2">
              <i class="fas fa-user text-gray-500 mr-2"></i>
              <span class="text-sm font-medium text-gray-700">用户名</span>
            </div>
            <input
              v-model="form.username"
              type="text"
              required
              class="input input-bordered w-full"
              placeholder="请输入用户名"
              @keyup.enter="handleSubmit"
            />
          </div>

          <!-- 密码 -->
          <div class="form-control">
            <div class="mb-2">
              <i class="fas fa-lock text-gray-500 mr-2"></i>
              <span class="text-sm font-medium text-gray-700">密码</span>
            </div>
            <div class="relative">
              <input
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'"
                required
                class="input input-bordered w-full pr-12"
                placeholder="请输入密码"
                @keyup.enter="handleSubmit"
              />
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
              >
                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
              </button>
            </div>
          </div>

          <!-- 记住密码 -->
          <div class="flex items-center justify-between">
            <label class="flex items-center cursor-pointer">
              <input
                v-model="form.remember"
                type="checkbox"
                class="checkbox checkbox-primary checkbox-sm mr-2"
              />
              <span class="text-sm text-gray-700">记住密码</span>
            </label>
            <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">忘记密码？</a>
          </div>

          <!-- 错误提示 -->
          <div v-if="authStore.error" class="alert alert-error alert-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-sm">{{ authStore.error }}</span>
          </div>

          <!-- 登录按钮 -->
          <div class="form-control">
            <button
              type="submit"
              :disabled="authStore.isLoading"
              class="btn bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white border-0 w-full hover:shadow-lg transition-all duration-300"
            >
              <span v-if="authStore.isLoading" class="flex items-center justify-center">
                <span class="loading loading-spinner loading-sm"></span>
                登录中...
              </span>
              <span v-else class="flex items-center justify-center">
                <i class="fas fa-sign-in-alt mr-2"></i>登录
              </span>
            </button>
          </div>
        </form>

        <!-- 其他选项 -->
        <div class="text-center mt-4">
          <p class="text-gray-600">
            还没有账号？
            <router-link to="/register" class="link link-primary font-medium">立即注册</router-link>
          </p>
        </div>

        <!-- 安全提示 -->
        <div class="mt-4 p-4 bg-blue-50 rounded-lg">
          <div class="flex items-start">
            <i class="fas fa-shield-alt text-blue-600 mt-0.5 mr-2"></i>
            <div class="text-sm text-blue-800">
              <p class="font-medium mb-1">安全提示</p>
              <ul class="text-xs space-y-1">
                <li>• 密码采用加密传输，确保您的账户安全</li>
                <li>• 建议使用复杂密码，包含字母、数字和特殊字符</li>
                <li>• 不要在公共设备上记住密码</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const router = useRouter();
const authStore = useAuthStore();

const form = reactive({
  username: '',
  password: '',
  remember: false
});

const showPassword = ref(false);

const handleSubmit = async () => {
  const success = await authStore.login(form.username, form.password);
  
  if (success) {
    // 如果记住密码，保存到localStorage
    if (form.remember) {
      localStorage.setItem('rememberedUsername', form.username);
      localStorage.setItem('rememberedPassword', form.password);
    } else {
      localStorage.removeItem('rememberedUsername');
      localStorage.removeItem('rememberedPassword');
    }
    router.push('/');
  }
  // 如果登录失败，error会在authStore中显示，不需要额外处理
};

// 页面加载时检查记住的登录信息
onMounted(() => {
  const savedUsername = localStorage.getItem('rememberedUsername');
  const savedPassword = localStorage.getItem('rememberedPassword');
  
  if (savedUsername && savedPassword) {
    form.username = savedUsername;
    form.password = savedPassword;
    form.remember = true;
  }
});
</script>

<style scoped>
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 自定义输入框聚焦效果 */
.input:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.05) !important;
  outline: none;
}

/* 自定义复选框大小 */
.checkbox-sm {
  width: 14px;
  height: 14px;
}

/* 调整玻璃态效果 */
.card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: 2rem;
}

/* 小尺寸错误提示 */
.alert-sm {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.alert-sm .svg {
  width: 1.25rem;
  height: 1.25rem;
}
</style>